@import '../../cdk/a11y/a11y';

$mat-snack-bar-padding: 14px 24px !default;
$mat-snack-bar-min-width: 288px !default;
$mat-snack-bar-max-width: 568px !default;
$mat-snack-bar-spacing-margin: 24px !default;


.mat-snack-bar-container {
  border-radius: 2px;
  box-sizing: border-box;
  display: block;
  margin: $mat-snack-bar-spacing-margin;
  max-width: $mat-snack-bar-max-width;
  min-width: $mat-snack-bar-min-width;
  padding: $mat-snack-bar-padding;
  // Initial transformation is applied to start snack bar out of view, below its target position.
  // Note: it's preferred to use a series of transforms, instead of something like `calc()`, because
  // IE won't animate transforms that contain a `calc`.
  transform: translateY(100%) translateY($mat-snack-bar-spacing-margin);

  /**
   * Removes margin of snack bars which are center positioned horizontally.  This
   * is done to align snack bars to the edge of the view vertically to match spec.
   */
  &.mat-snack-bar-center {
    margin: 0;
    transform: translateY(100%);
  }

  /**
   * To allow for animations from a 'top' vertical position to animate in a downward
   * direction, set the translation to start the snack bar above the target position.
   */
  &.mat-snack-bar-top {
    transform: translateY(-100%) translateY(#{-$mat-snack-bar-spacing-margin});

    &.mat-snack-bar-center {
      transform: translateY(-100%);
    }
  }

  @include cdk-high-contrast {
    border: solid 1px;
  }
}

/**
 * The mat-snack-bar-handset class will be applied to the overlay
 * element causing styling to both it and the snack bar container.
 */
.mat-snack-bar-handset {
  width: 100%;

  .mat-snack-bar-container {
    margin: 0;
    max-width: inherit;
    width: 100%;
  }
}
